<template>
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="username" label="用户" width="120px">
        </el-table-column>
        <el-table-column label="权限" prop="power">
            <template #default="scope">
                <el-tag class="ml-2" type="error" v-show="scope.row.power.includes('所有权限')">所有权限</el-tag>
                <el-tag class="ml-2" type="success"
                    v-show="!scope.row.power.includes('所有权限') && scope.row.power.includes('成员变更')">用户权限管理</el-tag>
                <el-tag class="ml-2" v-show="!scope.row.power.includes('所有权限') && scope.row.power.includes('用户权限管理')">
                    用户权限管理</el-tag>
                <el-tag class="ml-2" type="warning"
                    v-show="!scope.row.power.includes('所有权限') && scope.row.power.includes('住户信息修改')">住户信息修改</el-tag>
                <el-tag class="ml-2" type="info" v-show="scope.row.power.length == 0">暂无权限</el-tag>
            </template>

        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <PermissionDialog @reGetList="getMessage"></PermissionDialog>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex';
import http from '../../util/api'
import PermissionDialog from '../../components/PermissionDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useStore()

const tableData = ref([])

const filterTag = (value: string, row: any) => {
    return row.tag === value
}

onMounted(() => {
    getMessage()
})

//获取用户权限信息
const getMessage = () => {
    http('/register').then(res => {
        console.log(res.data);
        tableData.value = res.data
    })
}

//编辑信息
const handleEdit = (row: any) => {
    console.log(row)
    store.commit('changePerDialog')
    store.commit('showPerEdit', row)
}

//删除信息
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '确定删除该用户吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http(`/register/${row.id}`, 'delete').then(res => {
                console.log(res);
                if (res.status === 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功！',
                    })
                    getMessage()
                } else {
                    ElMessage({
                        type: 'error',
                        message: '删除失败！',
                    })
                }
            })
            getMessage()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}


</script>

<style scoped>

</style>